<script setup>
import liuyunoTabs from "../../components/liuyuno-tabs/liuyuno-tabs.vue";
import {ref} from "vue";
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import Tabbar from "../../components/tabbar.vue";
const index = ref(0)
const tabs = ['未签到','已签到']
const tabChange = (value) => {
  index.value=value
}
const topage10 = () => {
  uni.navigateTo({ url: './page10'})
}
</script>

<template>
  <view class="tp3m">
    <view class="tp3h">
      <liuyuno-tabs @tabClick="tabChange" :tabindex="index" :tab-data="tabs"></liuyuno-tabs>
    </view>
    <view v-if="index == 0" class="tp3m1">
      <view class="tp3h11">
        <uni-search-bar class="uni-tp3s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
      </view>
      <view class="tp3h12" @click="topage10">
        <view class="tp3pian11">
          <text style="font-size: 17px;color: #1c6ed9">签到日期：2024/1/20</text>
          <text  style="font-size: 17px;color: red">未签到</text>
        </view>
        <view class="tp3line1"></view>
        <text style="font-size: 12px">学生姓名：学生姓名</text>
        <br>
        <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
        <br>
        <text style="font-size: 12px;color: #666666">签到时间：-</text>
        <br>
        <text style="font-size: 12px;color: #666666">签到地点：-</text>
        <view class="tp3line2"></view>
        <text style="font-size: 12px;color: #666666">留校申请时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校结束时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校原因：留校原因留校原因</text>
        <br>
        <text style="font-size: 12px;color: #666666">校内原住宿地址：A校区A楼栋1单元1-103</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校集中住宿地址：等待分配</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校期间管理责任人：责任人姓名</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校期间管理责任人电话：15884418478</text>
        <view class="tp3pian12">
          <view class="tp3tu1"><text style="width: 40px">照片</text></view>
          <button class="tp3bt1">拨打电话</button>
        </view>
      </view>
    </view>
    <view v-else-if="index == 1" class="tp3m1">
      <view class="tp3h11">
        <uni-search-bar class="uni-tp3s1" radius="10" placeholder="请输入姓名/学号查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
      </view>
      <view class="tp3h12">
        <view class="tp3pian11">
          <text style="font-size: 17px;color: #1c6ed9">签到日期：2024/1/20</text>
          <text  style="font-size: 17px;color: #1c6ed9">已签到</text>
        </view>
        <view class="tp3line1"></view>
        <text style="font-size: 12px">学生姓名：学生姓名</text>
        <br>
        <text style="font-size: 12px;color: #666666">学号：2020090911004</text>
        <br>
        <text style="font-size: 12px;color: #666666">签到时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">签到地点：A地点</text>
        <view class="tp3line2"></view>
        <text style="font-size: 12px;color: #666666">留校申请时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校结束时间：2023/11/17 00:00:00</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校原因：留校原因留校原因</text>
        <br>
        <text style="font-size: 12px;color: #666666">校内原住宿地址：A校区A楼栋1单元1-103</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校集中住宿地址：等待分配</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校期间管理责任人：责任人姓名</text>
        <br>
        <text style="font-size: 12px;color: #666666">留校期间管理责任人电话：15884418478</text>
        <view class="tp3pian12">
          <view class="tp3tu1"><text style="width: 40px">照片</text></view>
          <button class="tp3bt1">拨打电话</button>
        </view>
      </view>
    </view>
    <view class="tabh"><Tabbar :cur-index="2"/></view>
  </view>
</template>

<style scoped lang="scss">
.tp3m{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(240, 248, 250, 1);
  width: 375px;
  height: 1000px;
}
.tp3m1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 375px;
}
.tp3h{
  display: flex;
}
.tp3h11{
  display: flex;
  justify-content: center;
  width: 100%;
}
.uni-tp3s1{
  width: 90%;
  height: 40px;
}
.tp3h12{
  height: 360px;
  width: 85%;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 3px 3px 3px #666666;
  padding: 10px;
}
.tp3pian11{
  display: flex;
  justify-content: space-between;
}
.tp3line1{
  border-bottom: 1px solid #666666;
  margin: 10px 0;
}
.tp3line2{
  border-bottom: 1px dashed #666666;
  margin: 10px 0;
}
.tp3pian12{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}
.tp3tu1{
  background-color: #87CEFA;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp3bt1{
  background-color: #1E90FF;
}
.tabh{
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>